imports-loader

作用：

模块引入

API：https://github.com/webpack-contrib/imports-loader

安装：

npm install imports-loader --save-dev

使用：

一、基本用法

//fn.js

export default function(){
    console.log(_$().jquery)
}

//app.js

import fn from 'imports-loader?_$=jquery!./js/fn.js';
fn();

在fn.js中定义了一个方法，打印出jquery的版本号，这里通过imports-loader的参数配置将_$指向为jquery，然后传递给fn.js，这里其实等价于：

//fn.js

import _$ from 'jquery';
export default function(){
    console.log(_$().jquery);
}

但是对于React，经过测试发现这样会报错：

//fn.js

class App extends R.Component{
    render(){
        return(
            <h1>Hello geralt</h1>
        )
    }
}
export default App;

//app.js

import ReactDOM from 'react-dom';
import App from 'imports-loader?R=react!./js/fn.js';
ReactDOM.render(<App/>,document.querySelector("#root"))

会抛出异常，‘React is not defined‘，必须在app.js和fn.js都引入React才可以，那其实这么做就没什么意义了。

二、正确用法

imports-loader实际应该是传递一些变量或全局第三方库的，如jquery。

1. 传递一个布尔值

   //fn.js
   
   export default ()=>{
       console.log(define)
   }
   

   //app.js
   
   import fn from 'imports-loader?define=>false!./js/fn.js';
   fn();
   

2. 传递一个对象

   //fn.js
   
   export default ()=>{
       console.log(define)
   }
   

   //app.js
   
   import fn from "imports-loader?define=>{name:'geralt'}!./js/fn.js";
   fn();
   

三、传递多个参数

import fn from "imports-loader?define=>{name:'geralt'},$=jquery!./js/fn.js";

四、webpack配置方式

{
  test: require.resolve("some-module"),
  use: "imports-loader?this=>window"
}

总结：

可能实际中依赖jquery的插件模块，可能会用的多一点，整体来看应用很少。